<template>
	<view class="content">
		
		<view class="title-panel">
			<image src="/static/loginbg.jpg" class="titlebg" mode="aspectFill"></image>
			<view class="title-mask"></view>
			<view class="app-title">Roommates</view>
			<view class="app-title-sub">寝室人脸扫描程序</view>
		</view>
		<view class="photo-area" @click="chooseImage">
			<view class="image-text" v-if="imagePath.length==0">
				<view>Roommates</view>
				<view>点击上传舍友的靓照</view>
			</view>
			<image v-if="imagePath.length>0" :src="imagePath" class="face-image" mode="aspectFit"></image>
		</view>
		<view class="face-button" @click="faceScan">
			开始扫描人脸
		</view>
		<view class="face-result" v-if="faces.length>0">
			<view class="face-item" v-for="(face,index) in faces" v-if="face.id>0">
				<view class="face-row">
					<view class="name">{{face.roomNickname}}</view>
				</view>
				<view class="face-row">
					<view class="label">年龄：</view>
					<view class="value">{{face.faceItem.age}}</view>
				</view>
				<view class="face-row">
					<view class="label">性别：</view>
					<view class="value">{{gender[face.faceItem.gender]}}</view>
				</view>
				<view class="face-row">
					<view class="label">脸型：</view>
					<view class="value">{{faceShape[face.faceItem.faceShape]}}</view>
				</view>
				<view class="face-row">
					<view class="label">表情：</view>
					<view class="value">{{expression[face.faceItem.expression]}}</view>
				</view>
				<view class="face-row">
					<view class="label">AI颜值：</view>
					<view class="value">{{face.faceItem.beauty}}</view>
				</view>
				<view class="face-row single">
					<view class="label">大家这样夸TA：</view>
					<view class="value">{{face.saySomething}}</view>
				</view>
			</view>
			
			<view class="face-item no-data" v-for="(face,index) in faces" v-if="face.id==null">
				<view class="face-row">
					<view class="name">{{face.roomNickname}}</view>
				</view>
				<view class="face-row">
					<view class="label">年龄：</view>
					<view class="value">{{face.faceItem.age}}</view>
				</view>
				<view class="face-row">
					<view class="label">性别：</view>
					<view class="value">{{gender[face.faceItem.gender]}}</view>
				</view>
				<view class="face-row">
					<view class="label">脸型：</view>
					<view class="value">{{faceShape[face.faceItem.faceShape]}}</view>
				</view>
				<view class="face-row">
					<view class="label">表情：</view>
					<view class="value">{{expression[face.faceItem.expression]}}</view>
				</view>
				<view class="face-row">
					<view class="label">AI颜值：</view>
					<view class="value">{{face.faceItem.beauty}}</view>
				</view>
				<view class="face-row single">
					<view class="label">大家这样夸TA：</view>
					<view class="value">{{face.saySomething}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imagePath:'',
				token:'',
				faces:[],
				gender:{"female":"女生","male":"男生"},
				expression:{"none":"不笑","smile":"微笑","laugh":"大笑"},
				faceShape:{"square":"方形脸","triangle":"锥形脸","oval":"椭圆形脸","heart":"心形脸","round":"圆形脸"}
			}
		},
		onLoad() {
			this.token=uni.getStorageSync("token");
			if(!this.token){
				uni.reLaunch({
					url:'../login/login'
				})
			}
		},
		methods: {
			chooseImage(){
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['original','compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['camera','album'], //从相册选择
				    success: (res)=> {
				        console.log(JSON.stringify(res.tempFilePaths));
						this.imagePath=res.tempFilePaths;
						this.faces=[];
				    }
				});
			},
			faceScan(){
				uni.showLoading({
					title:'正在扫描...'
				});
				uni.uploadFile({
					url: this.$serverUrl+"/api/roommates-face?Authorization="+this.token, //仅为示例，非真实的接口地址
					filePath: this.imagePath[0],
					name: 'imageFile',
					success: (uploadFileRes) => {
						uni.hideLoading(); 
						if(uploadFileRes.statusCode==200){
							try{
								var result=JSON.parse(uploadFileRes.data);
								console.log("人脸扫描结果",result);
								this.faces=result;
							}catch(e){
								uni.showToast({
									title:"人脸检测出错",
									icon:"none"
								})
							}
							
						}else{
							uni.reLaunch({
								url:"../login/login"
							})
						}
						
						
					}
				});
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		height:100vh;
		overflow-y: scroll;
	}
	.title-panel{
		width:750rpx;
		height:150px;
		flex-shrink: 0;
		position:relative;
	}
	.title-panel .titlebg{
		width:750rpx;
		height:150px;
		z-index: 5;
		position: absolute;
		top:0;
		left:0;
	}
	.title-panel .title-mask{
		width:750rpx;
		height:150px;
		z-index: 6;
		position: absolute;
		top:0;
		left:0;
		background-color: rgba(0,0,0,0.5);
	}
	.app-title{
		color:#fff;
		width:750rpx;
		font-size:300%;
		text-align: center;
		position: absolute;
		z-index: 10;
		top:10px;
	}
	.app-title-sub{
		top:80px;
		color:#fff;
		text-align: center;
		width:750rpx;
		letter-spacing: 25rpx;
		position: absolute;
		z-index: 10;
	}
	.photo-area{
		position:relative;
		display: flex;
		flex-shrink: 0;
		justify-content: center;
		align-items: center;
		width:750rpx;
		height:750rpx;
		margin-bottom:10px;
	}
	.image-text{
		font-size:90%;
		width:750rpx;
		height:750rpx;
		text-align: center;
		color:#696969;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color:rgba(18,210,106,0.1);
		box-shadow: 1px 1px 1px rgba(0,0,0,0.1);
		
	}
	.photo-area .face-image{
		background-color:rgba(18,210,106,0.1);
	}
	.face-result{
		font-size:80%;
	}
	.face-result .title{
		margin:10px;
	}
	.face-image{
		width:750rpx;
		height:750rpx;
		box-shadow: 1px 1px 1px rgba(0,0,0,0.1);
	}
	.face-button{
		width:500rpx;
		height:44px;
		display: flex;
		flex-shrink: 0;
		align-items: center;
		justify-content: center;
		background-color: #12d26a;
		color:#fff;
		border-radius: 22px;
	}
	.face-result{
		width:700rpx;
		padding:10px 25rpx;
		display: flex;
		flex-shrink: 0;
		flex-direction: column;
	}
	.face-item{
		padding:10px;
		display: flex;
		flex-direction: column;
		border:1px solid  #12D26A;
		margin-top:10px;
		border-radius: 2px;
		box-shadow: 1px 1px 1px rgba(0,0,0,0.1);
		background-color:rgba(18,210,106,0.1) ;
	}
	
	.face-item.no-data{
		background-color:rgba(69,69,69,0.1) ;
		border:1px solid  #696969;
	}
	.face-row{
		width:100%;
		display: flex;
		font-size:100%;
		justify-content: space-between;
	}
	.face-row .label{
		font-weight: bold;
	}
	.face-item.no-data .face-row .name{
		color:#696969;
	}
	.face-row .name{
		font-size:120%;
		font-weight: bold;;
		color:#12D26A;
		margin-bottom:10px;
	}
	.face-row .value{
		color:#555555;
	}
	
</style>
